<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="assets/reset.css" />
<link rel="stylesheet" href="assets/960.css" />
<link rel="stylesheet" href="assets/text.css" />
<link rel="stylesheet" href="assets/styles.css" />
<title>Aurelius Documentation | QwibbleDesigns</title>
</head>

<body>

<div class="container_12">
	<div class="grid_12">
		<h1>Aurelius Documentation</h1>
		<h2>Thank you for purchasing Aurelius. Learn how to get started with the theme!</h2>
	</div>
	<hr />
	<div class="grid_4">
		<p>
			<strong>Created :</strong> 1/2/10
			<br />
			<strong>Author :</strong> Matthew Corner
			<br />
			<strong>Email :</strong> <a href="mailto:matt@qwibbledesigns.co.uk">matt@qwibbledesigns.co.uk</a>
		</p>
	</div>
	<div class="grid_8">
		<p>Hey there, thank you ever so much for buying my theme; Aurelius. If you want to hear about further updates to this file, or about new files I produce, follow me on twitter at @QwibbleDesigns, or send me an email saying you'd like to hear about further updates via email, and you'll be added to the list.</p>
	</div>
	<hr class="dotted"/>
	<div class="grid_12">
		<h2>If you have any questions that aren't covered in this helpfile, shoot me an email and I'd be glad to help you out.</h2>
	</div>
	<hr />
	<div class="grid_12">
		<h3 class="question">What files are included with my theme?</h3>
		<div class="answer">
			<p>Aurelius is a HTML/CSS theme, so comes with ready layed out pages for you to work with. As well as Html, and Css though, there are several other file types such as javascript, and php. These are listed below, and briefly explained.</p>
			<h5>Html</h5>
			<ul>
				<li><strong>index.html</strong> - <i>The homepage for displaying your latest / best work, and some eyecatching links</i></li>
				<li><strong>about.html</strong> - <i>Tell your audience all about you, and your history</i></li>
				<li><strong>full_width.html</strong> - <i>A full width page showcasing how the major html elements are displayed in the theme</i></li>
				<li><strong>portfolio.html</strong> - <i>A gallery of all your work, displayed under different catagories that you choose</i></li>
				<li><strong>portfolio_single.html</strong> - <i>Show each project in its full glory with a link to the live site, and a rotator showing off your favourite elements</i></li>
				<li><strong>blog.html</strong> - <i>Keep your site fresh with new blog posts about whatever interests you</i></li>
				<li><strong>single.html</strong> - <i>the full page of a blog post complete with sidebar, comments, and a comment form</i></li>
				<li><strong>contact.html</strong> - <i>Let your audience get in touch with you with the contact form, and follow your social profiles</i></li>
			</ul>
			<h5>CSS</h5>
			<ul>
				<li><strong>reset.css</strong> - <i>This resets browsers so they'll render different elements the same. You need not worry about this file</i></li>
				<li><strong>styles.css</strong> - <i>This is where the business goes on, everything from the grid, to the looks are created here</i></li>
			</ul>
			<h5>Javascript</h5>
			<p>Please note : This theme makes use of Jquery, but pulls it from the google library to improve load time</p>
			<ul>
				<li><strong>contact.js</strong> - <i>This gets the contact form working, and offers client side validation</i></li>
				<li><strong>DD_belatedPNG_0.0.8a-min.js</strong> - <i>IE6 has problems displaying transparent png's so here's the fix</i></li>
				<li><strong>jquery.easing.1.3.js</strong> - <i>This file generates the animation on the image rotators</i></li>
				<li><strong>jquery.roundabout-1.0.min.js</strong> - <i>This is the power house behind the image rotator</i></li>
				<li><strong>jquery.roundabout-shapes-1.1.js</strong> - <i>On the portfolio single page, noticed how the rotator is vertical? This is done by this file</i></li>
			</ul>
			<h5>PHP</h5>
			<ul>
				<li><strong>send_email.php</strong> - <i>This pulls all the information from the contact form and sends the email, however you need not touch this file</i></li>
				<li><strong>config.html</strong> - <i>This config file allows you to input the email all contact form message will be sent to.</i></li>
			</ul>
			<h5>PSD</h5>
			<p>The theme comes with three predefined canvas's for photoshop; Image Rotator Item, Portfolio Item, and Blog Preview. These are to make your creation of these images with predefined sizes.</p>
			<h5>Images</h5>
			<p>The theme also comes with several images, not including the portfolio, and blog images. These are backgrounds for the site, and buttons.</p>
		</div>
	</div>
	<hr class="dotted"/>
	<div class="grid_12">
		<h3 class="question">How can I easily edit the html code?</h3>
		<div class="answer">
			<p>The aurelius theme comes with well commented code, using id's and classes that allow us to easily conclude what each elements does. Each page has general structure that can be seen below.</p>
			<img src="assets/html_structure.png" alt="Html Structure" />
			<p>As you can see, each section of a page is clearly labelled, so you'll never be lost within the file you are adding content to.</p>
		</div>
	</div>
	<hr class="dotted"/>
	<div class="grid_12">
		<h3 class="question">What steps do I need to take to make the site my own?</h3>
		<div class="answer">
			<p>As you may have noticed, any site on the internet has stuff such as the page title, the logo name, even possibly a favicon. These brief steps will allow you to personalise your site to your own company / you.</p>
			<h5>The page title</h5>
			<p>The page title is found within the head of each and every html file in this theme. To change it, you are going to have to edit the following line in every one of those html files.</p>
			<img src="assets/html_title.png" alt="Html Title" />
			<p>As you can see it is likely you will want to simply change "Aurelius" part of the title, leaving the name of the current page intact, so that visitors know where they currently are.</p>
			<h5>The site logo</h5>
			<p>You are bound to have noticed the big Aurelius logo in the top left corner of every page, and will definately want to place your own logo in here. The site logo comes in plain text, so I will show you how to input a text logo.</p>
			<img src="assets/html_logo.png" alt="Html Logo" />
			<p>Just like the page title, you will need to change the text within these logo tags on every html page you have. If on the other hand, you wish to impliment an image as a logo rather than text, I recommend you read <a href="http://css-tricks.com/css-image-replacement/">this article</a> on how to do so.</p>
			<h5>The footer text</h5>
			<p>By default, the footer comes with my name and site in the copyright. This doesnt have to be, and you are more than welcome to edit it to however you want. Like the above two changes, your going to need to make this edit in every html page you have.</p>
			<img src="assets/html_footer.png" alt="Html Footer" />
			<p>Leave the link to the top of the page, it's the line above that you want to edit, with your own name, and your own link.</p>
			<h5>Content</h5>
			<p>Most of the content is fairly self explanatory, using standrd html formatting. I can't teach you how to use these html elements, but looking around the html files will get you a long way by simply changing the default place setting text.</p>
		</div>
	</div>
	<hr class="dotted"/><div class="grid_12">
		<h3 class="question">How can I add my own images to the image rotators?</h3>
		<div class="answer">
			<p>The image rotators do much of the work for us. All we really need to do is provide the images and links within a html unordered list like below.</p>
			<img src="assets/html_rotator.png" alt="Html Rotator" />
			<p>You'll find lists like these on both the portfolio_single, and index pages. They both come with different id's, and these must be left intact for the rotator to work.</p>
			<p>As you can see, each item within the list has two specific things inside them, the link with its text wrapped in a span, and the image itself. All you need to do is reference the new image, and input the new link to the project page.</p>
			<p><strong>Please Note</strong> : The image rotator functions best with five items in it. Keep this in mind when adding new items. this is to feature your best / latest work, not all of you work.</p>
		</div>
	</div>
	<hr class="dotted"/>
	<div class="grid_12">
		<h3 class="question">How do I configure my contact form?</h3>
		<div class="answer">
			<p>You'll be glad to hear that I couldnt have made it any easier for you! You done need to change any of the html structure or javascript files to have the email sent to you. You simply need to open up config.php, and replace the dummy email with your own. Thats it!, one line of code, and you can test it sending email to you.</p>
			<img src="assets/php_config.png" alt="Contact form configuration" />
			<p><strong>Please Note</strong> : Make sure the quotation marks are left intact, otherwise the php file will fail no you. Only change the email address.</p>
		</div>
	</div>
	<hr class="dotted"/>
	<div class="grid_12">
		<h3 class="question">What resources were used in the making of this theme?</h3>
		<div class="answer">
			<p>I sadly cannot claim credit for every element of the Aurelius theme. While the design and layout is 100% mine, some elements were taken from other resources. The following images, icons, and jquery plugins were used.</p>
			<ul>
				<li><strong>Jquery javascript library</strong> by <a href="http://jquery.com/">Jquery</a> - <i>One of the most popular javscript librarys around, this is used for the effects on the website such as the contact form and rotators</i></li>
				<li><strong>Roundabout for Jquery</strong> by <a href="http://fredhq.com/projects/roundabout/">Fred LeBlanc</a> - <i>This jquery plugin creates the image rotator that features on the frontpage of Aurelius</i></li>
				<li><strong>Roundabout Shapes for Jquery</strong> by <a href="http://fredhq.com/projects/roundabout-shapes/">Fred LeBlanc</a> - <i>Noticed how the image rotator when viewing a project is vertical? This jquery plugin does the trick</i></li>
				<li><strong>Jquery Easing</strong> by <a href="http://gsgd.co.uk/sandbox/jquery/easing/">George McGinley Smith</a> - <i>Jquery easing adds the animation effects to the image rotator</i></li>
				<li><strong>Tweet My Web 7 icons</strong> by <a href="http://artdesigner.lv/archives/434">ArtDesigner</a> - <i>This beautiful icon pack includes the twitter bird featured on the homepage</i></li>
				<li><strong>Lovely Website icons Pack #1</strong> by <a href="http://artdesigner.lv/archives/185">ArtDesigner</a> - <i>This beautiful icon pack features some of the stunning icons on the homepage</i></li>
				<li><strong>Lovely Website icons Pack #2</strong> by <a href="http://artdesigner.lv/archives/282">ArtDesigner</a> - <i>This beautiful icon pack features some of the stunning icons on the homepage</i></li>
				<li><strong>Social Networking Icons</strong> by <a href="http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/">webtoolkit4.me</a> - <i>This set of icons are used in your contact page to link to your social profiles</i></li>
			</ul>
		</div>
	</div>
	<hr />
	<div class="grid_12">
		<h2>Thank you again for purchasing this theme from me. As said at the beginning, if you have any further questions regarding the theme, or want to hear about future updates to this and my other files, use the contact information at the top.</h2>
		<h2 class="right"><i>Matthew Corner</i></h2>
	</div>
</div><!--end container-->

</body>
</html>
